import 'package:ac/common/ac_chat_util.dart';
import 'package:ac/common/ac_pv_manager.dart';
import 'package:ac/common/style.dart';
import 'package:ac/model/ac_goods_model.dart';
import 'package:ac/page/ac_me/ac_me_logic.dart';
import 'package:ac/widget/ac_app_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'ac_goods_logic.dart';

class AcGoodsPage extends StatelessWidget {
  final logic = Get.find<AcGoodsLogic>();
  final state = Get.find<AcGoodsLogic>().state;

  AcGoodsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AcAppbar(
        title: "Coin Shop",
        actions: [
          GestureDetector(
            onTap: () {
              var id = Get.find<AcMeLogic>().strategyModel.userServiceAccountId;
              LogPvManger.stat(page: LogPages.customerPage);
              AcChatUtil.openChat(id!);
            },
            child: Image.asset(
              "images/icon_goods_service.png",
              width: 32.w,
            ),
          ),
          SizedBox(width: 20.w)
        ],
      ),
      body: Container(
        width: 375.w,
        padding: EdgeInsets.symmetric(horizontal: 20.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(height: 12.h),
            Container(
              width: 335.w,
              height: 110.h,
              padding: EdgeInsets.only(bottom: 15.h),
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('images/icon_goods_balance_bg.png'),
                  fit: BoxFit.contain,
                ),
              ),
              child: Row(
                children: [
                  SizedBox(width: 88.w),
                  Text(
                    "My Coin",
                    style: TextStyle(
                      fontSize: 16.sp,
                      color: Colors.white,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  const Spacer(),
                  Obx(() {
                    return Text(
                      "${state.userInfo.value?.availableCoins ?? 0}",
                      style: TextStyle(
                          fontSize: 24.sp,
                          color: Colors.white,
                          fontWeight: FontWeight.w800),
                    );
                  }),
                  SizedBox(width: 33.w)
                ],
              ),
            ),
            Expanded(
              child: Obx(() {
                return ListView.builder(
                  itemBuilder: (c, i) {
                    AcGoodsModel model = state.goodsList[i];
                    return GestureDetector(
                      onTap: () {
                        logic.buyGoods(model);
                      },
                      child: Container(
                        width: 335.w,
                        height: 88.h,
                        margin: EdgeInsets.symmetric(vertical: 12.h),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(8.r),
                        ),
                        child: Stack(
                          children: [
                            Positioned(
                              right: 0,
                              child: Visibility(
                                visible: model.originalPrice! > model.price!,
                                child: Container(
                                  height: 20.h,
                                  width: 70.w,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.only(
                                      bottomLeft: Radius.circular(8.r),
                                      topRight: Radius.circular(8.r),
                                    ),
                                    gradient: const LinearGradient(
                                      colors: [
                                        Color(0xFFFF9900),
                                        Color(0xFFFFF78A),
                                      ],
                                    ),
                                  ),
                                  child: Text(
                                    "Big Deal",
                                    style: TextStyle(
                                      fontSize: 12.sp,
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            Row(
                              children: [
                                SizedBox(width: 22.w),
                                Image.asset(
                                  "images/icon_coin.png",
                                  width: 32.w,
                                ),
                                SizedBox(width: 16.w),
                                Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      model.exchangeCoin.toString(),
                                      style: TextStyle(
                                        fontSize: 14.sp,
                                        color: textColorBlack,
                                        fontWeight: FontWeight.w600,
                                      ),
                                    ),
                                    if (model.discount! > 0 && model.originalPrice! > model.price!) ...[
                                      SizedBox(height: 8.h),
                                      Text(
                                        "${(model.discount! * 100).toInt()}% off",
                                        style: TextStyle(
                                          fontSize: 9.sp,
                                          color: const Color(0xffFFC371),
                                          fontWeight: FontWeight.w400,
                                        ),
                                      ),
                                    ]
                                  ],
                                ),
                                const Spacer(),
                                Text(
                                  "\$${model.price}",
                                  style: TextStyle(
                                    fontSize: 18.sp,
                                    color: textColorBlack,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                                SizedBox(width: 8.w),
                                Visibility(
                                  visible: model.originalPrice! > model.price!,
                                  child: Text(
                                    "\$${model.originalPrice}",
                                    style: TextStyle(
                                      fontSize: 10.sp,
                                      decoration: TextDecoration.lineThrough,
                                      color: textColorBlack.withOpacity(0.3),
                                      fontWeight: FontWeight.w400,
                                    ),
                                  ),
                                ),
                                SizedBox(width: 16.w)
                              ],
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                  itemCount: state.goodsList.length,
                );
              }),
            )
          ],
        ),
      ),
    );
  }
}
